<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <title>京东</title>
</head>
<body>
    <header class="app">
        <div>
            <img src="./images/1.png" alt="">
        </div>
        <div>
            <img src="./images/2.png" alt="">
        </div>
        <div>打开京东，方便又快捷</div>
        <div>立即登录</div>
    </header>
    <div class="daohang">
        <div class="left">
            <img src="./images/第二行.png" alt="">
        </div>
        <div class="sousuo">
            <img src="./images/JD.png">
            <div class="t">|</div>
            <div class="l"><img src="./images/图层 2.png"></div>
        </div>
        <div class="right">登录</div>
    </div>
    <!-- 轮播图 -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="./images/3.jpg" alt=""></div>
          <div class="swiper-slide"><img src="./images/4.jpg" alt=""></div>
          <div class="swiper-slide"><img src="./images/5.jpg" alt=""></div>
          <div class="swiper-slide"><img src="./images/6.jpg" alt=""></div>
          <div class="swiper-slide"><img src="./images/7.jpg" alt=""></div>
          <div class="swiper-slide"><img src="./images/8.jpg" alt=""></div>
          <div class="swiper-slide"><img src="./images/9.jpg" alt=""></div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
      <!-- 功能框 -->
      <div class="gongneng">
        <div class="a"><img src="./images/京东超市.png" alt=""><br><a href="#">京东超市</a></div>
        <div class="b"><img src="./images/数码电器.png" alt=""><br><a href="#">数码电器</a></div>
        <div class="c"><img src="./images/京东服饰.png" alt=""><br><a href="#">京东服饰</a></div>
        <div class="c"><img src="./images/京东生鲜.png" alt=""><br><a href="#">京东生鲜</a></div>
        <div class="c"><img src="./images/京东到家.png" alt=""><br><a href="#">京东到家</a></div>
        <div class="c"><img src="./images/充值缴费.png" alt=""><br><a href="#">充值缴费</a></div>
        <div class="c"><img src="./images/9.9元拼.png" alt=""><br><a href="#">9.9元拼</a></div>
        <div class="c"><img src="./images/领劵.png" alt=""><br><a href="#">领劵</a></div>
        <div class="c"><img src="./images/领金贴.png" alt=""><br><a href="#">领金贴</a></div>
        <div class="c"><img src="./images/PLUS会员.png" alt=""><br><a href="#">PLUS会员</a></div>
      </div>
      <!-- 广告图加字体 -->
      <div class="g">
        <div>
          <span></span>
          <span>正品直邮</span>
          <img src="./images/牙刷.jpg" alt="">
        </div>
        <div class="r">
          <span>来电好货</span>
          <span>3C大放价</span>
          <img src="./images/手机.jpg" alt="">
        </div>
        <div class="e">
          <span>国潮风尚</span>
          <span>国货正当时</span>
          <img src="./images/足力健.jpg" alt="">
        </div>
        <div>
          <span></span>
          <span>都是你爱的</span>
          <img src="./images/ipad.jpg" alt="">
        </div>
      </div>
      <div class="z">
        <div class="b">
          <span>极简女包</span>
          <span>简洁版型百搭出街</span>
          <img src="./images/女包.jpg" alt="">
          <img src="./images/极简.jpg" alt="">
        </div>
        <div class="a">
          <span>完美纪念</span>
          <span>过生日要有仪式感</span>
          <img src="./images/完美.jpg" alt="">
          <img src="./images/日记.jpg" alt="">
        </div>
      </div>
      <div class="x">
        <div class="xx">
          <span>小小少年</span>
          <span>学生必备</span>
          <img src="./images/小小少年.jpg" alt="">
        </div>
        <div class="o">
          <span>潮流双肩</span>
          <span>潮流双肩包</span>
          <img src="./images/潮流双肩.jpg" alt="">
        </div>
        <div class="p">
          <span>音乐时光</span>
          <span>音娱滋养</span>
          <img src="./images/音乐时光.jpg!q70.jpg" alt="">
        </div>
        <div class="cc">
          <span>程序猿</span>
          <span>装备必须牛</span>
          <img src="./images/程序猿.jpg" alt="">
        </div>
      </div>
      <!-- 底部状态栏 -->
      <div class="ztl">
        <div>
          <img src="./images/首页.png" alt="">
          </div>
          <div>
          <img src="./images/分类.png" alt="">
          </div>
          <div>
          <img src="./images/京喜.png" alt="">
          </div>
          <div>
          <img src="./images/购物车.png" alt="">
        </div>
          <div>
          <img src="./images/未登录.png" alt="">
        </div>
      </div>
      <!-- 轮播图js -->
      <script src="./js/swiper.min.js"></script>
      <script>
        var swiper = new Swiper('.swiper-container', {
          spaceBetween: 30,
          centeredSlides: true,
          autoplay: {
            delay: 2500,
            disableOnInteraction: false,
          },
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        });
      </script>
</body>
</html>